<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input {
            display: none;
        } */

        .c {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid red;
            cursor: pointer;
        }

        label {
            float: left;
            margin: 4px 10px;
        }

        input:checked+label {
            background-color: #f00;
        }
    </style>
</head>

<body>

    <!-- 
        表单标签
            form   提交数据的    提交数据也可以使用js     form不是必须的

            input   textarea   label   select option


        选择器
            层级选择器   
                > 子代
                +  同级兄弟相邻选择器
                ~  同级通用选择器

            伪类选择器
                checked 
                focus

        二级菜单  hover

        折叠菜单  点击效果 

        选项卡   点击切换图片的效果  


        表单的样式修改问题
            表单不继承父元素的文本属性
            表单点击的的时候  状态  focus焦点   outline:none
            输入框   自带边框，自带背景颜色，自带内边距
            文本域   自带拉伸效果   resize:none 

            搜索框的时候    上下对不齐或者有间距等问题   浮动解决

            上传文件   自带的样式无法修改   "障眼法"   透明度为0

            单选和多选   自带的样式只能修改宽高   input:checked + label 
     -->

    <input type="radio" name="a" id="a1" hidden>
    <label for="a1" class="c"></label>
    <label for="a1">男</label>

    <input type="radio" name="a" id="a2" hidden>
    <label for="a2" class="c"></label>
    <label for="a2">女</label>
</body>

</html>